import React, { ReactElement } from 'react'
import { connect } from 'umi'
import { Button, Row, Col, Card, Tag, Input } from 'antd'
import SkillUpload from './components/upload/SkillUpload'
import styles from './components/HeroCard.less'

const { TextArea } = Input

interface Props {
    addSkill: Function,
    delSkill: Function,
    changeSkillItem: Function,
    skills: any
}

function SkillAdmin({ addSkill, skills, delSkill, changeSkillItem }: Props): ReactElement {
    // cost: "100"  消耗
    // delay: "30"  冷却
    // desc: "我是描述"
    // icon: "http://192.168.101.70:3333/uploads/skills/c937aa41ce7f620bc543ffaceca8ac3f"
    // name: "技能名称"
    // tips: "我是提示"
    return (
        <div>
            <Button
                className={styles.mb15}
                type="primary"
                onClick={() => {
                    addSkill()
                }}
            > + 添加英雄</Button>
            <Row>
                {
                    skills.map((item: any, index: number) => {
                        return <Col key={index} span={12}>
                            <Card title={<Tag color="processing">技能{index + 1}</Tag>}>
                                <div className={styles.flex}>
                                    <span>
                                        技能名称:
                                    </span>
                                    <div>
                                        <Input onChange={(ev) => {
                                            changeSkillItem(index, 'name', ev.target.value)
                                        }} />
                                    </div>
                                </div>
                                <div className={styles.flex}>
                                    <span>
                                        技能图标:
                                    </span>
                                    <div>
                                        <SkillUpload index = { index }/>
                                    </div>
                                </div>
                                <div className={styles.flex}>
                                    <span>
                                        冷却值:
                                    </span>
                                    <div>
                                        <Input onChange={(ev) => {
                                            changeSkillItem(index, 'delay', ev.target.value)
                                        }} />
                                    </div>
                                </div>
                                <div className={styles.flex}>
                                    <span>
                                        消耗:
                                    </span>
                                    <div>
                                        <Input onChange={(ev) => {
                                            changeSkillItem(index, 'cost', ev.target.value)
                                        }} />
                                    </div>
                                </div>
                                <div className={styles.flex}>
                                    <span>
                                        技能描述:
                                    </span>
                                    <div>
                                        <TextArea onChange={(ev) => {
                                            changeSkillItem(index, 'desc', ev.target.value)
                                        }} />
                                    </div>
                                </div>
                                <div className={styles.flex}>
                                    <span>
                                        小提示:
                                    </span>
                                    <div>
                                        <TextArea onChange={(ev) => {
                                            changeSkillItem(index, 'tips', ev.target.value)
                                        }} />
                                    </div>
                                </div>
                                <div className={styles.flex}>
                                    <span>
                                        <Button
                                            type="primary"
                                            danger
                                            onClick={() => {
                                                delSkill(index)
                                            }}
                                        >删除</Button>
                                    </span>
                                </div>
                            </Card>
                        </Col>
                    })
                }
            </Row>
        </div>
    )
}


export default connect((state: any) => {
    const { heroCard } = state
    const { skills } = heroCard
    return {
        skills
    }
}, (dispatch) => {
    return {
        addSkill() {
            dispatch({ type: "heroCard/addSkill" })
        },
        delSkill(index: number) {
            dispatch({ type: "heroCard/delSkill", index })
        },
        changeSkillItem(index: number, classify: string, value: string) {
            dispatch({ type: "heroCard/changeSkillItem", index, classify, value })
        }
    }
})(SkillAdmin) 
